<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t('menu.M_10400202') }}
    </PageTitle>
    <el-tabs v-model="activeName">
      <el-tab-pane :label="$t('operator.createOperator')" name="first" />
      <el-tab-pane :label="$t('operator.createDemoOperator')" name="second" />
    </el-tabs>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <!--        TODO 多条件输入框 -->
        <!--        <el-form-item>
          <el-input
            v-model="dataForm.condition"
            maxlength="100"
            style="width: 270px"
            :placeholder="$t('operator.condition')"
            clearable
            @blur="() => (dataForm.condition = dataForm.condition.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>-->
        <el-form-item>
          <el-input
            v-model="dataForm.operatorName"
            :placeholder="$t('operator.name')"
            clearable
            @blur="() => (dataForm.operatorName = dataForm.operatorName.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item v-show="showFormItem('EMAIL')">
          <el-input
            v-model="dataForm.email"
            @blur="() => (dataForm.email = dataForm.email.trim())"
            :placeholder="$t('operator.email')"
            clearable
          />
        </el-form-item>
        <!--        <el-form-item v-show="showFormItem('EMAIL')">
          <el-checkbox v-model="dataForm.includeSubAccounts" :disabled="this.includeSubAccountsVisible" :true-label="1"
                       :false-label="0"  border size="small">{{ $t('operator.include_sub_accounts') }}</el-checkbox>
        </el-form-item>-->
        <el-form-item v-show="showFormItem('LEVEL_CODE')">
          <el-select v-model="dataForm.levelCode" clearable :placeholder="$t('operator.level')">
            <el-option
              v-for="item in levelList"
              :key="item.levelCode"
              :value="item.levelCode"
              :label="item.levelName"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="showFormItem('LOCK_STATUS')">
          <el-select
            v-model="dataForm.operatorStatus"
            clearable
            :placeholder="$t('operator.status')"
          >
            <el-option
              v-for="item in lockList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="showFormItem('VALIDITY_PERIOD_TYPE')">
          <el-select
            v-model="dataForm.validityPeriodType"
            clearable
            :placeholder="$t('operator.account_validity_period')"
          >
            <el-option
              v-for="item in accountValidPeriodList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="showFormItem('REGISTER_DATE')">
          <el-date-picker
            v-model="registerTime"
            type="daterange"
            value-format="timestamp"
            :start-placeholder="$t('operator.register_date')"
            :end-placeholder="$t('operator.register_date')"
          />
        </el-form-item>
        <el-form-item v-show="showFormItem('LINKMAN')">
          <el-input
            v-model="dataForm.linkman"
            @blur="() => (dataForm.linkman = dataForm.linkman.trim())"
            :placeholder="$t('operator.linkman')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="getDataList((pageNo = 1))">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="isAuth('10400202.MANAGE') && !this.demoAccountVisible"
            type="primary"
            class="w-8"
            @click="createOperator"
          >
            <svg-icon icon-class="plus" />
          </el-button>
          <el-button
            v-if="isAuth('10400202.MANAGE') && this.demoAccountVisible"
            type="primary"
            class="w-8"
            @click="createDemoOperator"
          >
            <svg-icon icon-class="plus" />
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button
            v-if="isAuth('10400202.MANAGE')"
            type="primary"
            class="w-8"
            @click="createLevelEmail"
          >
            <svg-icon icon-class="Message" />
          </el-button>
        </el-form-item>
        <el-form-item v-if="activeName === 'first'">
          <el-button type="primary" class="w-8" @click="exportOperator">
            <svg-icon icon-class="download" />
            <!--            <svg-icon icon-class="email"/>-->
          </el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" class="w-8" @click="filterDrawerVisible = true">
            <svg-icon icon-class="outlined-filter" />
          </el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" class="w-8">
            <table-column-filter
              :list="settingList"
              :default-setting="defaultSettings"
              v-model:settings="settings"
              domain="operator.table"
            />
          </el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="dataListLoading" :data="dataList" stripe>
        <el-table-column prop="operatorName" :label="$t('operator.name')">
          <template v-slot="scope">
            <div class="cursor-pointer" @click="showDetailHandle(scope.row)">
              {{ scope.row.operatorName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="drawerContact"
          key="linkMan"
          prop="linkMan"
          :label="$t('operator.linkman')"
        />
        <el-table-column
          v-if="drawerSubject"
          key="caCn"
          prop="caCn"
          min-width="100"
          :label="$t('operator.subject_cn')"
        />
        <el-table-column
          v-if="drawerIssuer"
          key="issuerCn"
          prop="issuerCn"
          min-width="100"
          :label="$t('operator.issuer_cn')"
        />
        <el-table-column
          v-if="drawerStatus"
          key="status"
          prop="status"
          min-width="100"
          :label="$t('operator.status')"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="info">
              {{ $t('operator.lock_status_list[0].label') }}
            </el-tag>
            <el-tag v-if="scope.row.status === 1" size="small">
              {{ $t('operator.lock_status_list[1].label') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="drawerCountry"
          key="countryCode"
          prop="countryCode"
          :label="$t('operator.country')"
        >
          <template v-slot="scope">
            {{ $t('country_or_region.' + scope.row.countryCode) }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="drawerRegister"
          key="creTime"
          prop="creTime"
          :label="$t('operator.register_date')"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter(scope.row.creTime) }}
              {{ scope.row.creTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="levelCode" width="200px" :label="$t('operator.level')">
          <template v-slot="scope">
            <el-tooltip
              v-if="scope.row.levelName && scope.row.levelName.length > 12"
              class="item"
              effect="dark"
              :content="$t('system_menu.level_name') + ': ' + scope.row.levelName"
              placement="top"
            >
              <el-tag size="small">
                {{ expirationHandler(scope.row.levelName, scope.row.levelExpireTime) }}
              </el-tag>
            </el-tooltip>
            <el-tag v-if="!scope.row.levelName || scope.row.levelName.length <= 12" size="small">
              {{ expirationHandler(scope.row.levelName, scope.row.levelExpireTime) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="75px">
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="showDetailHandle(scope.row)">
                    <svg-icon icon-class="View" />
                    {{ $t('common.detail') }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click="lockOrUnLockHandle(scope.row, 1)"
                    v-if="scope.row.status !== 1 && isAuth('10400202.MANAGE')"
                  >
                    <svg-icon icon-class="Unlock" />
                    {{ $t('operator.unlock') }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click="lockOrUnLockHandle(scope.row, 0)"
                    v-if="scope.row.status === 1 && isAuth('10400202.MANAGE')"
                  >
                    <svg-icon icon-class="Lock" />
                    {{ $t('operator.lock') }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click="deleteHandle(scope.row)"
                    v-if="
                      (scope.row.status === 1 || scope.row.status === 0) &&
                      isAuth('10400202.MANAGE')
                    "
                  >
                    <svg-icon icon-class="Delete" />
                    {{ $t('common.deleteBtn') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <!-- <el-tooltip
              class="item"
              effect="dark"
              :content="$t('common.detail')"
              placement="top"
            >
              <el-button
                type="text"
                style="color: #8c939d"
                icon="el-icon-view"
                @click="showDetailHandle(scope.row)"
              />
            </el-tooltip> -->
            <!-- <el-tooltip
              class="item"
              effect="dark"
              :content="
                scope.row.status === 0 ? $t('operator.unlock') : $t('operator.lock')
              "
              placement="top"
            >
              <el-button
                v-if="scope.row.status === 1 && isAuth('10400202.MANAGE')"
                type="text"
                icon="el-icon-lock"
                @click="lockOrUnLockHandle(scope.row, 0)"
              />
              <el-button
                v-if="scope.row.status !== 1 && isAuth('10400202.MANAGE')"
                type="text"
                icon="el-icon-unlock"
                @click="lockOrUnLockHandle(scope.row, 1)"
              />
            </el-tooltip> -->
            <!-- <el-tooltip
              v-if="isAuth('10400202.MANAGE')"
              class="item"
              effect="dark"
              :content="$t('common.deleteBtn')"
              placement="top"
            >
              <el-button
                v-if="
                  (scope.row.status === 1 || scope.row.status === 0) &&
                  isAuth('10400202.MANAGE')
                "
                type="text"
                icon="el-icon-delete"
                style="color: #f56c6c"
                @click="deleteHandle(scope.row)"
              />
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <operator-detail
      v-if="operatorDetailVisible"
      ref="operatorDetail"
      @close="operatorDetailVisible = false"
    />
    <check-operator
      v-if="checkOperatorVisible"
      ref="checkOperator"
      @refreshDataList="getDataList"
      @close="checkOperatorVisible = false"
    />
    <business
      v-if="addBusinessVisible"
      ref="business"
      @refreshDataList="getDataList"
      @close="addBusinessVisible = false"
    />
    <change-level
      v-if="changeLevelVisible"
      ref="changeLevel"
      @refreshDataList="getDataList"
      @close="changeLevelVisible = false"
    />
    <add-operator v-model="addOperatorVisible" ref="addOperator" @refreshDataList="getDataList" />
    <add-demo-operator
      v-if="addDemoOperatorVisible"
      ref="addDemoOperator"
      @refreshDataList="getDataList"
      @close="addDemoOperatorVisible = false"
    />
    <permissions
      v-if="permissionsVisible"
      ref="permissions"
      @refreshDataList="getDataList"
      @close="permissions = false"
    />
    <resetpw-operator
      v-if="resetpwOperatorVisible"
      ref="resetpwOperator"
      @refreshDataList="getDataList"
      @close="resetpwOperatorVisible = false"
    />
    <bind-operator v-model="addLevelEmailVisible" ref="addLevelEmail" />
    <div class="operatorDrawer">
      <el-drawer
        v-model="filterDrawerVisible"
        :direction="direction"
        :before-close="handleClose"
        size="320px"
        :with-header="false"
      >
        <div
          class="flex justify-between pb-2"
          style="border-bottom: 1px dashed var(--color-gray-5)"
        >
          <h2 style="line-height: 32px">FILTER</h2>
          <div>
            <el-button class="w-8" text @click="refreshFilter()"
              ><svg-icon icon-class="refresh" /></el-button
            ><span />
            <el-button
              class="w-8"
              text
              style="color: var(--el-color-primary)"
              @click="getDataList((pageNo = 1))"
              ><svg-icon icon-class="search"
            /></el-button>
          </div>
        </div>
        <div>
          <div class="pt-2">
            <div class="flex justify-between">
              <span
                class="filterLabel"
                :style="{ color: drawerSubject ? 'var(--el-color-primary)' : '' }"
                >Subject</span
              ><el-switch v-model="drawerSubject"> </el-switch>
            </div>
          </div>
          <div class="pt-2">
            <div class="flex justify-between">
              <span
                class="filterLabel"
                :style="{ color: drawerIssuer ? 'var(--el-color-primary)' : '' }"
                >Issuer</span
              ><el-switch v-model="drawerIssuer"> </el-switch>
            </div>
          </div>
          <div class="py-2" style="border-bottom: 1px dashed var(--color-gray-5)">
            <div class="flex justify-between">
              <span
                class="filterLabel"
                :style="{ color: drawerCountry ? 'var(--el-color-primary)' : '' }"
                >Country</span
              ><el-switch v-model="drawerCountry"> </el-switch>
            </div>
          </div>
          <div class="pt-2">
            <div class="flex justify-between">
              <span class="filterLabel">Operator Service Level</span>
            </div>
            <el-select
              v-model="dataForm.levelCode"
              clearable
              :placeholder="$t('operator.level')"
              class="w-full"
            >
              <el-option
                v-for="item in levelList"
                :key="item.levelCode"
                :value="item.levelCode"
                :label="item.levelName"
              />
            </el-select>
          </div>
          <div class="pt-2">
            <div class="flex justify-between">
              <span class="filterLabel">Account Validity Period</span>
            </div>
            <el-select
              v-model="dataForm.validityPeriodType"
              clearable
              :placeholder="$t('operator.account_validity_period')"
              class="w-full"
            >
              <el-option
                v-for="item in accountValidPeriodList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </div>
          <div class="pt-2">
            <div class="flex justify-between">
              <span class="filterLabel">Email</span>
            </div>
            <el-input
              v-model="dataForm.email"
              @blur="() => (dataForm.email = dataForm.email.trim())"
              :placeholder="$t('operator.email')"
              clearable
            />
          </div>

          <div class="pt-2">
            <div class="flex justify-between">
              <span
                class="filterLabel"
                :style="{ color: drawerStatus ? 'var(--el-color-primary)' : '' }"
                >Status</span
              ><el-switch v-model="drawerStatus"> </el-switch>
            </div>
            <el-select
              v-model="dataForm.operatorStatus"
              clearable
              :placeholder="$t('operator.status')"
              class="w-full"
            >
              <el-option
                v-for="item in lockList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </div>
          <div class="pt-2">
            <div class="flex justify-between">
              <span
                class="filterLabel"
                :style="{
                  color: drawerRegister ? 'var(--el-color-primary)' : ''
                }"
                >Register Date</span
              ><el-switch v-model="drawerRegister"> </el-switch>
            </div>
            <el-date-picker
              v-model="registerTime"
              type="daterange"
              value-format="timestamp"
              :start-placeholder="$t('operator.register_date')"
              :end-placeholder="$t('operator.register_date')"
              style="width: 100%"
            />
          </div>
          <div class="pt-2 pb-4" style="border-bottom: 1px dashed var(--color-gray-5)">
            <div class="flex justify-between">
              <span
                class="filterLabel"
                :style="{ color: drawerContact ? 'var(--el-color-primary)' : '' }"
                >Contact</span
              ><el-switch v-model="drawerContact"> </el-switch>
            </div>
            <el-input
              v-model="dataForm.linkman"
              @blur="() => (dataForm.linkman = dataForm.linkman.trim())"
              :placeholder="$t('operator.linkman')"
              clearable
            ></el-input>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { timeFilter, dateFilter } from '@/filters/index'
import TableColumnFilter from '@/components/page-setting/table-column-filter'

import { formatDate } from '@/utils/formatDate'
import { formatCountry } from '@/utils/formatCountry'
import {
  operatorList,
  deleteOperator,
  operatorLevelList,
  // exportOperatorInfo,
  lockManageOperator
} from '@/api/operator'
import OperatorDetail from './components/operator-detail'
import CheckOperator from './components/check-operator'
import ResetpwOperator from './components/resetpw-operator'
import Business from './components/add-business'
import ChangeLevel from './components/change-level'
import AddOperator from './components/add-operator'
import AddDemoOperator from './components/add-demo-operator'
import Permissions from './components/permissions'
import BindOperator from './components/expired-level-email'
import UpdateEmail from './components/update-email'
import { getToken } from '@/utils/auth'
import { getSystemMenuList } from '@/api/system-menu'
import { isAuth } from '@/utils'
import PageTitle from '@/components/PageTitle/index.vue'
export default {
  name: 'Operator',
  components: {
    OperatorDetail,
    CheckOperator,
    Business,
    ChangeLevel,
    AddOperator,
    AddDemoOperator,
    Permissions,
    ResetpwOperator,
    BindOperator,
    TableColumnFilter,
    PageTitle
  },
  data() {
    return {
      dataForm: {
        email: '',
        linkman: '',
        includeSubAccounts: 1,
        operatorName: '',
        condition: '',
        operatorStatus: null,
        levelCode: null,
        validityPeriodType: null
      },
      settings: {
        conditions: [],
        columns: []
      },
      registerTime: [],
      activeName: 'first',
      operatorDetailVisible: false,
      includeSubAccountsVisible: true,
      checkOperatorVisible: false,
      addBusinessVisible: false,
      changeLevelVisible: false,
      addOperatorVisible: false,
      addDemoOperatorVisible: false,
      addLevelEmailVisible: false,
      updateMapVisible: false,
      permissionsVisible: false,
      resetpwOperatorVisible: false,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false,
      orderListLoading: false,
      lockManageLoading: false,
      agreementShowVisible: false,
      curOperator: {},
      operatorLeverList: [],
      demoAccountVisible: false,
      levelList: [],
      filterDrawerVisible: false,
      direction: 'rtl',
      drawerStatus: false,
      drawerContact: false,
      drawerSubject: false,
      drawerIssuer: false,
      drawerCountry: false,
      drawerRegister: false
    }
  },
  computed: {
    lockList() {
      return [
        {
          value: 0,
          label: this.$t('operator.lock_list.locked')
        },
        {
          value: 1,
          label: this.$t('operator.lock_list.normal')
        }
      ]
    },
    accountValidPeriodList() {
      return [
        {
          value: 'EXPIRED',
          label: this.$t('operator.account_valid_list.expired')
        },
        {
          value: 'EXPIRING_SOON',
          label: this.$t('operator.account_valid_list.expiring')
        },
        {
          value: 'FOREVER',
          label: this.$t('operator.account_valid_list.forever')
        },
        {
          value: 'NORMAL',
          label: this.$t('operator.account_valid_list.normal')
        }
      ]
    },
    settingList() {
      return {
        conditions: [
          {
            title: this.$t('operator.status'),
            code: 'LOCK_STATUS'
          },
          {
            title: this.$t('operator.level'),
            code: 'LEVEL_CODE'
          },
          {
            title: this.$t('operator.account_validity_period'),
            code: 'VALIDITY_PERIOD_TYPE'
          },
          {
            title: this.$t('operator.email'),
            code: 'EMAIL'
          },
          {
            title: this.$t('operator.register_date'),
            code: 'REGISTER_DATE'
          },
          {
            title: this.$t('operator.linkman'),
            code: 'LINKMAN'
          }
        ],
        columns: [
          {
            title: this.$t('operator.linkman'),
            code: 'LINKMAN'
          },
          {
            title: this.$t('operator.subject_cn'),
            code: 'CN'
          },
          {
            title: this.$t('operator.issuer_cn'),
            code: 'ISSUER_CN'
          },
          {
            title: this.$t('operator.status'),
            code: 'LOCK_STATUS'
          },
          {
            title: this.$t('operator.country'),
            code: 'COUNTRY'
          },
          {
            title: this.$t('operator.register_date'),
            code: 'CRETIME'
          }
        ]
      }
    },

    defaultSettings() {
      return {
        conditions: ['EMAIL'],
        columns: [
          'LINKMAN',
          // this.$t('common.online'),
          'CN'
        ]
      }
    }
  },
  mounted() {
    this.$store.commit('app/ADD_KEEP_ALIVE_LIST', 'Operator')
    this.init()
  },
  activated() {
    this.getDataList()
  },
  beforeRouteLeave(to, from, next) {
    const allTooltips = document.querySelectorAll('.el-tooltip__popper')
    console.log(allTooltips)
    if (allTooltips.length) {
      Array.from(allTooltips).map((node) => document.body.removeChild(node))
    }
    if (to.name !== 'operator-Info') {
      this.$store.commit('app/REMOVE_KEEP_ALIVE_LIST', 'Operator')
    }
    next()
  },
  methods: {
    refreshFilter() {
      ;(this.drawerStatus = false),
        (this.drawerContact = false),
        (this.drawerSubject = false),
        (this.drawerIssuer = false),
        (this.drawerCountry = false),
        (this.drawerRegister = false)
      this.registerTime[0] = ''
      this.registerTime[1] = ''
      this.dataForm.operatorStatus = ''
      this.dataForm.levelCode = ''
      this.dataForm.email = ''
      this.dataForm.validityPeriodType = ''
      this.dataForm.linkman = ''
    },
    handleClose(done) {
      done()
    },
    timeFilter,
    dateFilter,
    getLevelInfo() {
      const params = {
        characterCode: '',
        levelCode: '',
        pageNo: 1,
        pageSize: 100
      }
      getSystemMenuList(params)
        .then((res) => {
          this.levelList = res.data
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    async init() {
      this.registerTime = []
      await this.getDataList()
      await this.getLevelInfo()
      await this.getOperatorLevelLsit()
    },
    showHeader(label) {
      var list = this.settings['columns']
      return list ? list.includes(label) : false
    },
    showFormItem(label) {
      var list = this.settings['conditions']
      return list ? list.includes(label) : false
    },
    reset(operatorId, operatorType) {
      this.resetpwOperatorVisible = true
      this.$nextTick(() => {
        this.$refs.resetpwOperator.init(operatorId, operatorType)
      })
    },
    exportOperator() {
      this.$confirm(
        this.$t('operator.export_operator_info_confirm'),
        this.$t('operator.export_operator_info'),
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          window.location.href =
            import.meta.env.VITE_APP_BASE_API +
            '/online/management/admin/operator/export?WEB-TOKEN=' +
            getToken() +
            '&timezone=' +
            Intl.DateTimeFormat().resolvedOptions().timeZone +
            '&pageNo=1&pageSize=10&operatorType=1' +
            '&operatorName=' +
            this.dataForm.operatorName
        })
        .catch(() => {})
    },
    currentOperator(row) {
      this.curOperator = row
    },
    batchOperate(command) {
      this.changeLevelVisible = true
      this.$nextTick(() => {
        this.$refs.changeLevel.init(command, this.curOperator.operatorId)
      })
    },
    // 获取数据列表
    getDataList() {
      // this.dataListLoading = true
      var regQryStartTime = null
      var regQryEndTime = null
      if (this.registerTime && this.registerTime.length === 2) {
        regQryStartTime = this.registerTime[0] / 1000
        regQryEndTime = this.registerTime[1] / 1000 + 60 * 60 * 24
      }
      console.log(this.registerTime)
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        operatorName: this.dataForm.operatorName,
        condition: this.dataForm.condition,
        operatorStatus: this.dataForm.operatorStatus,
        includeSubAccounts: this.dataForm.includeSubAccounts,
        levelCode: this.dataForm.levelCode,
        email: this.dataForm.email,
        validityPeriodType: this.dataForm.validityPeriodType,
        operatorType: this.activeName === 'first' ? 1 : 0,
        linkman: this.dataForm.linkman,
        regQryStartTime: regQryStartTime,
        regQryEndTime: regQryEndTime
      }
      console.log(params)
      operatorList(params)
        .then((data) => {
          this.dataList = data.data
          this.rows = data.rows
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataListLoading = false
          this.$confirmError(e)
          // this.$message.error(e.message)
          console.log(`err:${JSON.stringify(e)}`)
        })
    },
    deleteHandle(row) {
      this.$confirm(this.$t('operator.deleteConfirm'), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        this.$confirm(this.$t('operator.deleteConfirm1'), '', {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          this.$confirm(this.$t('operator.deleteConfirm2'), '', {
            confirmButtonText: this.$t('common.confirm'),
            cancelButtonText: this.$t('common.cancel'),
            type: 'warning'
          }).then(() => {
            deleteOperator(row.operatorId)
              .then((data) => {
                this.$message({
                  type: 'success',
                  message: this.$t('common.success')
                })
                this.getDataList()
              })
              .catch((e) => {
                this.$confirmError(e)
              })
          })
        })
      })
      console.log(row)
    },

    getOperatorLevelLsit() {
      const param = {
        characterCode: 'OPERATOR'
      }
      operatorLevelList(param)
        .then((data) => {
          this.operatorLevelList = data
          console.log(this.operatorLevelList)
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList()
    },
    showDetailHandle(row) {
      localStorage.setItem('operator-info', JSON.stringify(row))
      this.$router.push({
        path: `/operator/operator-detail/${row.operatorId}`
      })
      // this.operatorDetailVisible = true
      // this.$nextTick(() => {
      //   this.$refs.operatorDetail.init(id)
      // })
    },
    checkOperatorHandle(row) {
      console.log(row)
      /* if (row.operatorType === 'DEMO') {
        // 服务调用失败的情况，才会出现
        this.checkDemoOperatorVisible = true
        this.$nextTick(() => {
          this.$refs.checkDemoOperator.init(row)
        })
      } else {
        this.checkOperatorVisible = true
        this.$nextTick(() => {
          this.$refs.checkOperator.init(row)
        })
      } */

      this.checkOperatorVisible = true
      this.$nextTick(() => {
        this.$refs.checkOperator.init(row)
      })
    },
    addLicenseHandle(row) {
      // this.$router.push(
      //   {
      //     path: `/operator/operator-detail`,
      //     query: {
      //       operatorId: row.operatorId,
      //       operatorType: row.operatorType
      //     }
      //   }
      // )
      this.addBusinessVisible = true
      this.$nextTick(() => {
        this.$refs.business.init(row)
      })
    },
    resetMapHandle(row) {
      this.updateMapVisible = true
      this.$nextTick(() => {
        this.$refs.updateMap.init(row)
      })
    },
    blackListHandle(row) {
      this.permissionsVisible = true
      this.$nextTick(() => {
        this.$refs.permissions.init(row)
      })
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf()
      return formatDate(cellValue, fmt)
    },
    formatCountry(row, column, cellValue, index) {
      return formatCountry(cellValue)
    },
    expirationHandler(Name, levelExpirationTime) {
      // eslint-disable-next-line no-unused-vars
      if (!Name) {
        Name = '-'
      }
      let levelName = Name
      if (Name.length > 11) {
        levelName = Name.slice(0, 11) + '...'
      }
      // if (levelCode === 'STANDARD_LEVEL') {
      //   levelName = this.$t('operator.level_list[0].label')
      // } else if (levelCode === 'ENTERPRISE_LEVEL') {
      //   levelName = this.$t('operator.level_list[1].label')
      // }
      console.log(levelExpirationTime)
      if (!levelExpirationTime || levelExpirationTime === undefined) {
        return levelName + ' | ' + this.$t('operator.leverExpireForever')
      }
      var date = formatDate(levelExpirationTime, 'YYYY-MM-DD')
      return levelName + ' | ' + date
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let value = row[column.property]
      if (value != null) {
        if (column.property === 'creTime') {
          value = this.formatDate(row[column.property], 'YYYY-MM-DD')
        }
        if (column.property === 'countryCode') {
          value = formatCountry(row[column.property])
        }
        if (value.length * 13 > column.width) {
          return 'font-size:' + (column.width * 0.95) / value.length + 'px'
        }
      }
      // console.log(rowIndex + ':' + JSON.stringify(row))
      //  console.log(columnIndex + ':' + JSON.stringify(column))
    },
    createOperator() {
      this.addOperatorVisible = true
      this.$nextTick(() => {
        this.$refs.addOperator.init()
      })
    },
    createDemoOperator() {
      this.addDemoOperatorVisible = true
      this.$nextTick(() => {
        this.$refs.addDemoOperator.init()
      })
    },
    handleClick(tab, event) {
      this.registerTime = []
      if (tab.name === 'second') {
        this.demoAccountVisible = true
      } else if (tab.name === 'first') {
        this.demoAccountVisible = false
      }
      this.getDataList()
    },
    createLevelEmail() {
      this.addLevelEmailVisible = true
      this.$nextTick(() => {
        this.$refs.addLevelEmail.init()
      })
    },
    lockOrUnLockHandle(row, lockStatus) {
      this.$confirm(
        lockStatus === 1
          ? this.$t('operator.unlock_operator_tip')
          : this.$t('operator.lock_operator_tip'),
        '',
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      ).then(() => {
        lockManageOperator(row.operatorId, lockStatus)
          .then((data) => {
            this.$message({
              message: this.$t('common.success'),
              type: 'success'
            })
            this.getDataList()
          })
          .catch((e) => {
            this.$confirmError(e)
          })
      })
    },
    checkEmail() {
      if (this.dataForm.email.length > 0) {
        this.dataForm.email = this.dataForm.email.trim()
        if (this.dataForm.email.length > 0) {
          this.includeSubAccountsVisible = false
        } else {
          this.includeSubAccountsVisible = true
          this.dataForm.includeSubAccounts = 0
        }
      } else {
        this.includeSubAccountsVisible = true
        this.dataForm.includeSubAccounts = 0
      }
      console.log('this.includeSubAccountsVisible:' + this.includeSubAccountsVisible)
    },
    isAuth
  }
}
</script>
<style lang="scss" scope>
.app-container {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;

  &--border-none {
    border-radius: 0;
  }
}
.filterLabel {
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-gray-10);
}
</style>
<style>
.operatorDrawer .el-overlay {
  background-color: transparent;
}
</style>
